<template>
  <div style="padding: 5px">
    <van-button
        type="primary"
        plain
        hairline
        icon="plus"
        size="large"
        @click="handleAdd"
    >添加一条
    </van-button>
    <van-swipe-cell v-for="(item, index) in options" :key="index">
      <van-cell is-link arrow-direction="left">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-space :size="20">
            <span class="custom-title">{{ item.name }}</span>
<!--            <van-tag type="primary" v-if="item.source === 0" :color="item.color"-->
<!--            >预置类型-->
<!--            </van-tag-->
<!--            >-->
            <div :style="{width: '10px',height: '10px',borderRadius: '50%',backgroundColor:item.color}"></div>
          </van-space>
        </template>
      </van-cell>
      <template #right v-if="item.source !== 0">
        <van-button square type="danger" text="删除"/>
      </template>
    </van-swipe-cell>
  </div>
</template>
<script setup lang="ts" name="typeManage">
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {typeList1, typeList2, typeList3} from "./index.data";
import {getTypeList} from "../../../api/manage.ts";

const router = useRouter();
const route = useRoute();
const key = ref(route.query.key as string);

function handleAdd() {
  router.push({path: "/manage/type/add", query: {key: key.value}});
}

const options = ref();

function reload() {
  getTypeList(key.value).then((res: any) => {
    options.value = res;
  });
}

reload();

function getOptions(key: string) {
  if (key === "1") return typeList1;
  if (key === "2") return typeList2;
  if (key === "3") return typeList3;
  return typeList1;
}
</script>
<style lang="css" scoped>
.custom-title {
  color: #9a6c2a;
  font-size: 16px;
  font-family: "PingFang SC", "Microsoft YaHei";
}
</style>
